﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>加载鹰眼控件</title>
    <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol/ol.js" type="text/javascript"></script>
    <style type="text/css">
        #map{
            width:100%;
            height:580px;
        }
        /*=S 自定义鹰眼样式 */
        .ol-custom-overviewmap,.ol-custom-overviewmap.ol-uncollapsible {
            bottom: auto;
            left: auto;
            right: 0; /* 右侧显示 */
            top: 0;  /* 顶部显示 */
        }
        /* 鹰眼控件展开时控件外框的样式 */
        .ol-custom-overviewmap:not(.ol-collapsed)  {
            border: 1px solid black;
        }
         /* 鹰眼控件中地图容器样式 */
        .ol-custom-overviewmap .ol-overviewmap-map {
            border: none;
            width: 300px;
        }
        /* 鹰眼控件中显示当前窗口中主图区域的边框 */
        .ol-custom-overviewmap .ol-overviewmap-box {
            border: 2px solid red;
        }
        /* 鹰眼控件展开时其控件按钮图标的样式 */
        .ol-custom-overviewmap:not(.ol-collapsed) button{
            bottom: auto;
            left: auto;
            right: 1px;
            top: 1px;
        }
        /*=E 自定义鹰眼样式 */
    </style>
</head>
<body>
    <div id="map" > 
    </div>
    <script type="text/javascript">
        ////实例化鹰眼控件（OverviewMap）,最简单的默认样式鹰眼控件
        // var overviewMapControl = new ol.control.OverviewMap();

        //实例化鹰眼控件（OverviewMap）,自定义样式的鹰眼控件  
        var overviewMapControl = new ol.control.OverviewMap({
            className: 'ol-overviewmap ol-custom-overviewmap', //鹰眼控件样式（see in overviewmap-custom.html to see the custom CSS used）
            //鹰眼中加载同坐标系下不同数据源的图层
            layers: [ 
                new ol.layer.Tile({
                    source: new ol.source.OSM({
                        'url': 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
                    })
                })
            ],
            collapseLabel: '\u00BB', //鹰眼控件展开时功能按钮上的标识（网页的JS的字符编码）
            label: '\u00AB', //鹰眼控件折叠时功能按钮上的标识（网页的JS的字符编码）
            collapsed: false //初始为展开显示方式
        });

        //实例化Map对象加载地图
        var map = new ol.Map({
            target: 'map', //地图容器div的ID
            //地图容器中加载的图层
            layers: [
                //加载瓦片图层数据
                new ol.layer.Tile({
                    source: new ol.source.OSM() //图层对应数据源，此为加载OpenStreetMap在线瓦片服务数据
                })
            ],
            //地图视图设置
            view: new ol.View({
                center: [12000000, 4000000], //地图初始中心点
                zoom: 8  //地图初始显示级别
            }),
            //加载控件到地图容器中
            controls: ol.control.defaults().extend([overviewMapControl])//加载鹰眼控件
        });
    </script>
</body>
</html>
